<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 50px;
				height: 50px;
				background-color:rosybrown ;
				margin-top: 30px;
			}
		</style>
		<script type="text/javascript">
			function move(odiv,dir,end,time){
				var when =  parseFloat(getstyle(odiv,dir));   //开始的数值
				var dist = end - when;   //距离
				var total =parseInt(time/30);  //求出总数
				console.log(when);
				var n =0;
				clearInterval(odiv.item);
				odiv.item=setInterval(function(){
					
					n++;
					console.log(total);
					console.log(n);
					odiv.style[dir]=when+dist*n/total+'px';
					if(n == total){
						clearInterval(odiv.item);
					
						
					}
				},30)
				
			};
			function getstyle(odiv,dir){
				return odiv.currentStyle ? odiv.currentStyle(dir) : getComputedStyle(odiv,false)[dir];
			}
			
			window.onload=function(){
			 	var odiv =document.getElementsByTagName('div');
			 	var arrr = Array.from(odiv);
			 	console.log(arrr);
			 	arrr.forEach(function(cur)
			 	{
			 		cur.onmouseover=function()
			 		{
			 			move(cur,'width',500,1000);
			 		},
			 		cur.onmouseout=function()
			 		{
			 			move(cur,'width',50,1000);
			 		}
			 		
			 	})
				
			}
		</script>
	</head>
	<body>
		<div>
			
		</div>
		<div>
			
		</div>
		<div>
			
		</div>
		<div>
			
		</div>
	</body>
</html>
